<template>
	<view class="store-center">
		<view class="store-center-header">
			<view class="store-center-top">
				<view class="store-center-top-title">今日订单总金额</view><view class="store-center-top-num">5300.00</view>
			</view>
			<view class="store-center-cate flex f-a-center">
				<view class="store-center-cate-item">
					<view class="store-center-cate-item-title">订单总数(单)</view>
					<view class="store-center-cate-item-num">{{infoData.order_count||0}}</view>
				</view>
				<view class="store-center-cate-item">
					<view class="store-center-cate-item-title">本月销量(元)</view>
					<view class="store-center-cate-item-num">5300.00</view>
				</view>
				<view class="store-center-cate-item">
					<view class="store-center-cate-item-title">商品发布</view>
					<view class="store-center-cate-item-num">{{infoData.goods_count||0}}</view>
				</view>
				<view class="store-center-cate-item">
					<view class="store-center-cate-item-title">已完成交易(元)</view>
					<view class="store-center-cate-item-num">{{infoData.order_completed_count||0}}</view>
				</view>
			</view>
		</view>
		<view class="store-center-mid flex f-a-center f-j-center">
			<view class="store-center-mid-item">
				<image class="store-center-mid-item-icon" src="../../../static/icons/store/mid_icon1.png"></image>
				<view class="store-center-mid-item-text">营销</view>
			</view>
			<view class="store-center-mid-item">
				<image class="store-center-mid-item-icon" src="../../../static/icons/store/mid_icon2.png"></image>
				<view class="store-center-mid-item-text">财务报表</view>
			</view>
			<view class="store-center-mid-item">
				<image class="store-center-mid-item-icon" src="../../../static/icons/store/mid_icon3.png"></image>
				<view class="store-center-mid-item-text">零钱</view>
			</view>
		</view>
		<view class="store-center-page">
			<view class="store-center-page-title">交易订单</view>
			<view class="store-center-page-order flex f-a-center">
				<navigator open-type="navigate" hover-class="none" url="/pages/jewel/store/orderlist" class="store-center-page-order-item">
					<view class="store-center-page-order-item-num">{{infoData.order_no_pay_count||0}}</view>
					<view class="store-center-page-order-item-title">待付款</view>
				</navigator>
				<navigator open-type="navigate" hover-class="none" url="/pages/jewel/store/orderlist" class="store-center-page-order-item">
					<view class="store-center-page-order-item-num">{{infoData.order_delivered||0}}</view>
					<view class="store-center-page-order-item-title">已发货</view>
				</navigator>
				<navigator open-type="navigate" hover-class="none" url="/pages/jewel/store/orderlist" class="store-center-page-order-item">
					<view class="store-center-page-order-item-num">{{infoData.order_completed||0}}</view>
					<view class="store-center-page-order-item-title">已完成</view>
				</navigator>
				<navigator open-type="navigate" hover-class="none" url="/pages/jewel/store/orderlist" class="store-center-page-order-item">
					<view class="store-center-page-order-item-num">{{infoData.order_refunding||0}}</view>
					<view class="store-center-page-order-item-title">退款中</view>
				</navigator>
				<navigator open-type="navigate" hover-class="none" url="/pages/jewel/store/orderlist" class="store-center-page-order-item">
					<view class="store-center-page-order-item-num">{{infoData.order_wait_delivery}}</view>
					<view class="store-center-page-order-item-title">待发货</view>
				</navigator>
				<navigator open-type="navigate" hover-class="none" url="/pages/jewel/store/orderlist" class="store-center-page-order-item">
					<view class="store-center-page-order-item-num">{{infoData.order_wait_take}}</view>
					<view class="store-center-page-order-item-title">待收货</view>
				</navigator>
				<navigator open-type="navigate" hover-class="none" url="/pages/jewel/store/orderlist" class="store-center-page-order-item">
					<view class="store-center-page-order-item-num">{{infoData.order_closed}}</view>
					<view class="store-center-page-order-item-title">已关闭</view>
				</navigator>
			</view>
		</view>
		<view class="store-center-page">
			<view class="store-center-page-title">商家帮助</view>
			<view class="store-center-page-list">
				<navigator hover-class="none" class="store-center-page-list-item flex f-a-center">
					<view class="store-center-page-list-item-title">账户管理</view>
					<arrow size="40" color="#828282" direction="right" class="store-center-page-list-item-arrow"></arrow>
				</navigator>
				<navigator hover-class="none" class="store-center-page-list-item flex f-a-center">
					<view class="store-center-page-list-item-title">密码修改</view>
					<arrow size="40" color="#828282" direction="right" class="store-center-page-list-item-arrow"></arrow>
				</navigator>
				<navigator hover-class="none" class="store-center-page-list-item flex f-a-center">
					<view class="store-center-page-list-item-title">银行卡管理</view>
					<arrow size="40" color="#828282" direction="right" class="store-center-page-list-item-arrow"></arrow>
				</navigator>
				<navigator hover-class="none" class="store-center-page-list-item flex f-a-center">
					<view class="store-center-page-list-item-title">常见问题</view>
					<arrow size="40" color="#828282" direction="right" class="store-center-page-list-item-arrow"></arrow>
				</navigator>
			</view>
		</view>
	</view>
</template>
<script>
	import jewel from '@/common/common_zb.js';
	export default {
		data() {
			return {
				infoData:{}
			};
		},
		methods: {
			
		},
		onLoad() {
			let that = this
			jewel.get('Seller/seller_statistics',{}, true, function(res){
				if(res.data.code == 0){
					that.infoData = res.data.data
				}
			})
		}
	};
</script>

<style lang="scss" scoped>
	page{
		background-color: #f5f5f5;
	}
	.flex{
		display: flex;
	}
	.f-a-center{
		align-items: center;
	}
	.f-j-center{
		justify-content: center;
	}
	.store-center{
		&-header{
			color: #FFFFFF;
			text-align: center;
			background-image: linear-gradient(145deg, #d71511, #f25e76);
			padding-bottom: 20rpx;
		}
		&-top{
			padding: 50rpx 0;
			&-title{
				font-size: 30rpx;
			}
			&-num{
				font-size: 60rpx;
			}
		}
		&-cate{
			flex-wrap: wrap;
			&-item{
				width: 50%;
				margin-bottom: 20rpx;
				&-title{
					font-size: 28rpx;
				}
				&-num{
					font-size: 36rpx;
				}
			}
		}
		&-mid{
			height: 214rpx;
			background-color: #FFFFFF;
			border-radius: 20rpx 20rpx 0 0;
			margin-top: -20rpx;
			&-item{
				text-align: center;
				flex: 1;
				&-icon{
					width: 88rpx;
					height: 88rpx;
				}
				&-text{
					color: #191919;
					font-size: 28rpx;
				}
			}
		}
		&-page{
			background-color: #FFFFFF;
			padding-top: 26rpx;
			margin-top: 15rpx;
			&-title{
				color: #d71511;
				font-size: 28rpx;
				position: relative;
				padding-left: 20rpx;
				margin-left: 40rpx;
				line-height: 48rpx;
				&::after{
					content: '';
					position: absolute;
					width: 5rpx;
					height: 22rpx;
					top:50%;
					left: 0;
					background-color: #d71511;
					transform: translateY(-50%);
				}
			}
			&-order{
				flex-wrap: wrap;
				text-align: center;
				padding-bottom: 20rpx;
				&-item{
					width: 25%;
					padding: 15rpx 0;
					&-num{
						font-size: 36rpx;
					}
					&-title{
						font-size: 28rpx;
						color: #4c4c4c;
					}
				}
			}
			&-list{
				padding-bottom: 30rpx;
				&-item{
					width: 660rpx;
					margin: 0 auto;
					justify-content: space-between;
					height: 80rpx;
					border-bottom: 1px solid #f6f6f6;
					&-title{
						color: #0d0d0d;
						font-size: 28rpx;
					}
					&-arrow{
						margin-right: 20rpx;
					}
				}
			}
		}
	}
</style>
